VSCodeのリファクタ機能を駆使してDefault Exportを駆逐する

tl;dr

code: example1func.ts

export default function hoge() {...}

や

code: example1class.ts

export default class Clas {...}

の形式のDefault ExportはVSCodeのRefactor(Ctrl or Cmd-Shift-R)の"Convert default export to named export"でNamed Exportに変換できる

code: example2.ts

const identifier = ...

export default identifier

の形式のDefault Exportはclassを挿入して

code:typescript

export default class identifier

にしてVSCodeのRefactor(Ctrl or Cmd-Shift-R)の"Convert default export to named export"をしたあとこの行を削除し，

code: typescript

export const identifier = ...

にすることでNamed Exportに変換することができる

Default ExportはAPI上必須な場合を除いて避けたほうがいいと考えられている

参考

しかし，既に生まれてしまったDefault Exportをなんとかする方法はあまり語られていない

少なくともtosuke.iconはコマンド一発みたいな方法を見つけられていない

TS Compiler APIを使えば(おそらく)可能だが，ファイル間の依存関係を追跡することになるのでそこまで簡単ではない

手作業でやると依存関係を追跡する必要があって何かと面倒だが，VSCodeのリファクタ機能を使うと勝手に依存関係を追跡して変更してくれる

しかし挙動に癖があり，↑の1のようなパターンなら簡単にNamed Exportにできるが，2.のパターン(React Componentで頻出する)は直接変換できない

いろいろ試行錯誤した末にこの方法でいけることに気付いた

tsserverが識別子とASTしか見ていない & パーサが柔軟

本来class Hogeは正しいJavaScriptの式ではないが，TypeScriptのパーサは柔軟なのでClassDeclarationとして認識する

完全にパターン化できたが，やっぱり面倒なので時間あったらコマンド一発にしたい

補足

HoCのようなパターンを使った場合

code: hoc.default.tsx

const Component = props => (...)

export default enhance(Component)

のようなDefault Exportが発生しがち

このような形(export defaultされる式が識別子ではない)は機械的にNamed Exportに変換できないが，多くの場合

code: hoc.named.tsx

export const Component = enhance(function Component(props) { ... })

みたいにできる

Arrow FunctionにしないのはdisplayNameを破壊しないため